<template>
  <data-table-app-view :containerSubtractHeight="36">
    <el-form slot="toolbar" inline :model="searchForm">
      <el-form-item label="时间范围">
        <type-select
          v-model="searchDay"
          :items="[
            {value: 1, text: '今天'},
            {value: -1, text: '昨天'},
            {value: 7, text: '近一周'}
          ]"
          :clearable="false"
          style="width: 90px"
          @change="onSearchDayChange"
        />
        <span>或</span>
        <el-date-picker
          v-model="timeRange"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm:00"
          :default-time="['00:00:00', '23:59:59']"
          align="right"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          @change="onTimeRangeChange"
        />
      </el-form-item>
      <el-form-item label="呼叫类型">
        <type-select
          v-model="searchForm.contactType"
          :items="contactType"
          style="width: 90px"
        />
      </el-form-item>
      <el-form-item label="挂断类型">
        <type-select
          v-model="searchForm.contactDisposition"
          :items="contactDisposition"
          style="width: 140px"
        />
      </el-form-item>
      <el-form-item label="客户电话/客服">
        <el-input
          v-model="searchForm.criteria"
          style="width: 160px"
        />
      </el-form-item>
      <el-form-item>
        <data-table-query-button :query-params="searchForm" />
      </el-form-item>
    </el-form>
    <data-table
      ref="table"
      url="/api/callcenter/record/page"
      lazy
      :loadFilter="loadFilter"
    >
      <el-table-column prop="startTime" label="时间" width="160" v-slot="{row}">
        {{moment(row.startTime).format('YYYY-MM-DD HH:mm:ss')}}
      </el-table-column>
      <el-table-column prop="customerNumber" label="客户电话" width="110"></el-table-column>
      <el-table-column label="客户姓名" width="80" show-overflow-tooltip v-slot="{row}">
        {{row.realName || row.aliasName || '未知'}}
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="50" v-slot="{row}">
        {{row.sex == null ? '-' : row.sex == 0 ? '男' : '女'}}
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="50" v-slot="{row}">
        {{row.age == null ? '-' : row.age}}
      </el-table-column>
      <el-table-column prop="contactType" label="呼叫类型" width="80" v-slot="{row}">
        {{maps.contactType[row.contactType]}}
      </el-table-column>
      <el-table-column prop="duration" label="时长" width="70" v-slot="{row}">
        {{toDurationText(row.duration * 1000)}}
      </el-table-column>
      <el-table-column prop="contactDisposition" label="挂断类型" width="80" show-overflow-tooltip v-slot="{row}">
        <el-tag :type="{
            Success: 'success',
            NoAnswer: 'danger',
            Busy: 'danger',
            Rejected: 'warning',
            AbandonedInContactFlow: 'danger',
            AbandonedInQueue: 'danger',
            AbandonedRing: 'danger',
            QueueOverflow: 'danger',
            OneStepTransfer: 'success'
          }[row.contactDisposition] || 'warning'"
        >
          <span>{{maps.contactDisposition[row.contactDisposition]}}</span>
        </el-tag>
      </el-table-column>
      <el-table-column prop="agentNames" label="客服" width="80" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" fixed="right" min-width="154" v-slot="{row}">
        <el-button
          :disabled="!row.user"
          type="default"
          plain
          @click="onUserDetailsClick(row)"
        >
          详情
        </el-button>
        <el-dropdown
          v-if="row.recordings.length"
          @command="onRecodingCommandClick($event, row)"
          :show-timeout="100"
        >
          <el-button
            type="primary"
            plain
            split-button
          >
            录音<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="play">播放</el-dropdown-item>
            <el-dropdown-item command="download">下载</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-table-column>
    </data-table>
    
    <audio-dialog ref="audioDialog" title="录音" />
  </data-table-app-view>
</template>


<script>
import { toDurationText } from '@/utils/time';
import moment from 'moment';

export default {
  components: {
    AudioDialog: () => import('@/components/AudioDialog')
  },
  data() {
    let contactDisposition = [
      {value: 'Success', text: '正常'},
      {value: 'NoAnswer', text: '无应答'},
      {value: 'Rejected', text: '拒绝'},
      {value: 'Busy', text: '忙'},
      {value: 'AbandonedInContactFlow', text: 'IVR呼损'},
      {value: 'AbandonedInQueue', text: '队列呼损'},
      {value: 'AbandonedRing', text: '久振不接'},
      {value: 'QueueOverflow', text: '等待超时被挂断'},
      {value: 'OneStepTransfer', text: '转外线'}
    ];
    let contactDispositionMap = {};
    for (let item of contactDisposition) {
      contactDispositionMap[item.value] = item.text;
    }

    let contactType = [
      {value: 'Inbound', text: '呼入'},
      {value: 'Outbound', text: '呼出'}
    ];
    let contactTypeMap = {};
    for (let item of contactType) {
      contactTypeMap[item.value] = item.text;
    }

    this.toDurationText = toDurationText;
    this.moment = moment;

    return {
      searchForm: {
        orderBy: 'DESC',
        startTime: 0,
        stopTime: 0
      },
      searchDay: 7,
      timeRange: [],
      contactDisposition,
      contactType,
      maps: {
        contactType: contactTypeMap,
        contactDisposition: contactDispositionMap
      }
    }
  },
  mounted() {
    this.onSearchDayChange();
    this.$refs.table.query(this.searchForm);
  },
  methods: {
    query() {
      this.$refs.table.reloadCurrentPage();
    },
    loadFilter(data) {
      if (!data.callDetailRecords)
        return [];
      data.callDetailRecords.list.forEach(function(row) {
        Object.assign(row, row.user);
      });
      let total = data.callDetailRecords.totalCount;
      // 解决接口只在第一页查询时才返回总数
      if (total == 0) {
        total = this.lastTotal;
      } else {
        this.lastTotal = total;
      }
      return {total, rows: data.callDetailRecords.list};
    },
    onSearchDayChange() {
      var days = +this.searchDay;
      if (days) {
        switch (days) {
          case 1:
            this.searchForm.startTime = 0;
            this.searchForm.stopTime = 0;
            break;
          case -1:
            var today = new Date(moment().format('YYYY-MM-DD 00:00:00')).getTime();
            this.searchForm.startTime = today - 1000*60*60*24;
            this.searchForm.stopTime = today;
            break;
          case 7:
            this.searchForm.startTime = new Date(moment().subtract(days - 1, 'days').format('YYYY-MM-DD 00:00:00')).getTime();
            this.searchForm.stopTime = 0;
            break;
        }
        this.timeRange = [];
        this.$refs.table.query(this.searchForm);
      }
    },
    onTimeRangeChange(values) {
      //TODO 暂时不支持7天以上
      //https://help.aliyun.com/document_detail/65296.html
      this.searchForm.startTime = moment(values[0], 'YYYY-MM-DD HH:mm:00').unix() * 1000;
      this.searchForm.stopTime = moment(values[1], 'YYYY-MM-DD HH:mm:00').unix() * 1000;
      this.searchDay = null;
    },
    onUserDetailsClick(row) {
      this.pushPage({
        path: '/user/details',
        params: { user: row.user },
        key: row.user.id
      });
    },
    onRecodingCommandClick(cmd, row) {
      switch (cmd) {
        case 'play':
          this.$refs.audioDialog.show({
            src: `/api/callcenter/record/raw?fileName=${row.recordings[0].fileName}`
          });
          break;
        case 'download':
          location.href = `/api/callcenter/record/download?`
            `fileName=${row.recordings[0].fileName}&returnFileName=${row.recordings[0].fileDescription}.wav`;
          break;
      }
    }
  }
}
</script>
